import React, { Component } from 'react'
import { Button, Table, Breadcrumb ,Modal, Row, Col, DatePicker, message} from 'antd';
import { connectRouter } from '../../../mixins/router';
import history from '../../../history'
import { Link } from 'react-router-dom';
import api from '../../../api/api';
import { testPermission } from '../../common/HasPermission';
import './GroupPay.less'



function disabledDate(current) {
    return current && current.valueOf() > Date.now();
}

class GroupOrderInsurance extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nullBePayOrder:{
                id:'',
                details:[]
            },
            bePayOrder:{},
            timeModal: false,
            paymentTime: ''
        }
    }
    async componentDidMount(){
        // 获取需要缴费的清单列表
        let bePayOrder = await api.getBePayGroupInsurancePayment()
        this.setState({
            bePayOrder
        })
    }
    // 下载待缴费会员清单
    downloadMemberList=(record)=>{
        console.log('record:',record)
        // 获取缴费单id
        let id = this.state.bePayOrder.id
        window.open(`/_api/groupInsurance/payment/${id}/groupOrderBillInfo/${record.groupOrderBillId}/paymentMemberDownload`,'_blank')
    }
    // 下载待退保会员清单
    downloadRevokeMemberList=(record)=>{
        console.log('record:',record)
        let id = this.state.bePayOrder.id
        window.open(`/_api/groupInsurance/payment/${id}/groupOrderBillInfo/${record.groupOrderBillId}/revokeMemberDownload`,'_blank')
    }

    submitToService= async()=>{
        const paymentTime = this.state.paymentTime
        const self = this

        if(!paymentTime){
            message.error('请选择实际缴费时间!');
            return
        }

        Modal.confirm({
            title:'提交确认',
            content:'提交后无法回退，是否提交？',
            okText:'确定',
            cancelText:'取消',
            async onOk() {
                // 提交缴费清单
                let id = self.state.bePayOrder.id

                try{
                    // 不报错就是提交成功
                    await api.putGroupInsurancePayment(id,paymentTime )
                    Modal.success({
                        title:'提交结果',
                        content:'上传成功',
                        okText:'确定',
                        onOk:()=>{
                            self.goBack()
                        }
                    })
                }catch(e){
                    Modal.error({
                        title:'提交结果',
                        content:'提交失败',
                        okText:'确定'
                    })
                }
            },
            onCancel() {
            },
        })

    }
    submit=()=>{
        this.setState({
            timeModal: true
        })
        // let self = this

    }

    timeChange = (o,v)=>{
        this.setState({
            paymentTime: v
        })
    }

    goBack=()=>{
        if (this.props.router.query.r && this.props.router.query.r.indexOf('/GroupPayOrderList') === 0) {
            history.push(this.props.router.query.r)
        } else {
            history.push('/GroupPayOrderList')
        }
    }

    handleCancel = ()=>{
        this.setState({
            timeModal: false
        })
    }

    get backToIndex() {
        if (this.props.router.query.r && this.props.router.query.r.indexOf('/GroupPayOrderList') === 0) {
          return this.props.router.query.r;
        } else {
          return '/GroupPayOrderList';
        }
    }
    render() {
        let { bePayOrder, nullBePayOrder, timeModal } = this.state;
        bePayOrder = bePayOrder || nullBePayOrder
        return (
            <div className="group-pay">
                <Breadcrumb className="breadcrumb-box">
                    <Breadcrumb.Item>
                        <Link to={this.backToIndex}>缴费管理列表</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>缴费</Breadcrumb.Item>
                </Breadcrumb>
                <div className="main">
                    <Table dataSource={bePayOrder.details}  rowKey="sequenceNo">
                        <Table.Column title="保单号" dataIndex="sequenceNo" key="sequenceNo"></Table.Column>
                        <Table.Column title="投保产品(代码)" dataIndex="product" key="product"></Table.Column>
                        <Table.Column title="续费期数" dataIndex="period" key="period"></Table.Column>
                        <Table.Column title="分期应缴时间" dataIndex="payDate" key="payDate"></Table.Column>
                        <Table.Column title="待缴费会员数" dataIndex="count" key="count"></Table.Column>
                        <Table.Column title="待退保会员数" dataIndex="returnCount" key="returnCount"></Table.Column>
                        <Table.Column title="承保会员" dataIndex="groupOrderId" key="groupOrderId"
                            render={(text,record)=>{
                                return <span className="downLink" onClick={()=>{ this.downloadMemberList(record)}}>待缴费会员清单.xls</span>
                            }}
                        ></Table.Column>
                        <Table.Column title="待退保会员" dataIndex="" key=""
                            render={(text,record)=>{
                                return <span className="downLink" onClick={()=>{ this.downloadRevokeMemberList(record)}}>待退保会员清单.xls</span>
                            }}
                        ></Table.Column>

                    </Table>
                </div>
                {
                    bePayOrder.id ? (
                        <div className="btn" style={{marginTop:'10px'}}>
                            <Button onClick={this.submit}  type="primary">提交</Button>
                            <Button onClick={this.goBack}  type="primary" style={{marginLeft:'10px'}}>返回</Button>
                        </div>
                    ) : ''
                }

                <Modal
                    title="实际缴费时间"
                    visible={timeModal}
                    onOk={this.submitToService}
                    onCancel={this.handleCancel}
                    >
                        <Row type="flex" align="middle">
                            <Col>实际缴费时间： </Col>
                            <Col span={18}>
                                <DatePicker
                                    onChange={this.timeChange}
                                    disabledDate={disabledDate}
                                    format="YYYY-MM-DD"
                                 />
                            </Col>
                        </Row>
                </Modal>

            </div>
        )
    }
}

export default connectRouter(GroupOrderInsurance);
